<!--
 * @Description: watchEffect进阶
 * @Author: ZhangHan
 * @Date: 2025-06-17 15:16:06
 * @LastEditTime: 2025-06-17 16:11:09
 * @LastEditors: ZhangHan
-->
<template>
  <div class="w-full h-full flex-col">
    <h2>watchEffect进阶</h2>
    <div>
      <div>{{ num }}</div>
      <div>
        <ElButton @click="addNum">增加Num</ElButton>
      </div>
    </div>
    <div>数量：{{ info.number }}---价格:{{ info.price }}</div>
    <div>
      <ElButton @click="changeInfo">修改info</ElButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from "vue";
import { ElButton } from "element-plus";

const num = ref(0);
const info = reactive({
  number: 10,
  price: 100,
});

// flush: "post"组件选然后执行回调
const { stop, pause, resume } = watchEffect(
  () => {
    console.log("初始化会执行一次");
    
    const startTime = performance.now();
    console.log(num.value);
    console.log(info.number);
    console.log(info.price);
    const endTime = performance.now();
    console.log(`渲染后执行回调耗费了 ${endTime - startTime} 毫秒`);
  },

);

const addNum = () => {
  num.value += 1;
  if (num.value === 10) {
    // 当不再需要此监听器时，调用stop 会直接销毁 调用resume无效
    // stop();
    // 暂停侦听器
    // pause();
  } else if (num.value >= 20) {
    // 稍后恢复
    // resume();
  }
};

const changeInfo = () => {
    info.number++;
    info.price += 10;
}

</script>
